import ProTable from '@/components/ProTable';
import { Row, Col, Empty } from 'antd';
import React, { useMemo, useState } from 'react';
import { titleDesc } from '../config';
import { getColumnsData } from '../config/columns.jsx';
import { debounce } from 'lodash';

const TableRender = ({ data = [], headerHeight, columns, updatePageConfig }) => {

  const [tableKey, setTableKey] = useState();

  //渲染展示的列
  const realColumns = useMemo(() => {
    return getColumnsData({
      columns,
    })
  }, [columns])

  const wrapStyle = {
    overflowY: 'auto',
    overflowX: 'hidden',
    background: '#fff',
    height: `calc(100vh - ${headerHeight}px)`
  }

  	//保存列款配置
	const saveColumnWidth = (val) => {
		realColumns.map((v, i) => {
			//忽略选择列
			v.width = val[i];
		})
		updatePageConfig('columns', realColumns);
    setTableKey(Date.now());
	}

  return (
    <div style={wrapStyle} >
      {data.length > 0 ? data.map(item => {
        const ProTableProps = {
          key: tableKey,
          data: item.pickingGoodsSummarySpuVOList,
          columns: realColumns,
          columnResizeOption: {
            onChangeSizes: debounce(saveColumnWidth, 300)
          },
        }
        return (
          <div key={item.supplierName} className='views-virtual-table-wrap' style={{ marginTop: '12px' }}>
            <Row gutter={8} style={{ background: '#F7F8FC', padding: '12px 8px', fontSize: '12px' }}>
              {
                titleDesc.map(v => {
                  return (
                    <Col className="gutter-row" key={v.label} span={v.span}>
                      <div>{v.label}：{item[v.value]}</div>
                    </Col>
                  )
                })
              }
            </Row>
            <ProTable { ...ProTableProps } />
          </div>
        )
      })
        :
        <Empty style={{ marginTop: '64px' }} />
      }
    </div>
  )
}

export default TableRender;